<template>
  <div class="scene">
    <div class="title">预案清单</div>
    <div class="condition">
      <div class="condition_1 flex">
        <div class="name">
          <div>预案名称:</div>
          <el-input placeholder="请输入预案名称" v-model="List.PlanName" :disabled="filterShow" />
          <div @click="searchChange('展开')" class="filter">
            展开高级筛选 <i :class="filterShow === true ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
          </div>
        </div>
        <div class="btn flex">
          <div @click="searchChange('重置')">重置</div>
          <div @click="searchChange('查询')">查询</div>
        </div>
      </div>
      <div class="condition_2 flex" v-show="filterShow === true">
        <div class="List flex">
          <div>预案名称</div>
          <el-input placeholder="请输入预案名称" v-model="List.PlanName" />
        </div>
        <div class="List flex">
          <div>预案类型</div>
          <el-input placeholder="请输入预案名称" v-model="List.PlanType" />
        </div>
        <div class="List flex">
          <div>事故类型</div>
          <el-input placeholder="请输入事故类型" v-model="List.AccidentType" />
        </div>
        <div class="List flex">
          <div>事故发生区域</div>
          <el-input placeholder="请输入事故发生区域" v-model="List.AccidentArea" />
        </div>
        <div class="List flex">
          <div>事故发生设备</div>
          <el-input placeholder="请输入事故发生设备" v-model="List.AccidentPoint" />
        </div>
      </div>
      <div class="condition_3">
        <div v-for="(item, index) in filterList" :key="item">
          {{ item }}
          <i class="el-icon-close" @click="searchChange('删除', item)"></i>
        </div>
      </div>
    </div>
    <div class="Line"></div>
    <div class="Btn flex">
      <div></div>
      <div class="BtnList flex">
        <div @click="operate('新增')">
          <i class="el-icon-plus"></i>新增
        </div>
        <div @click="operate('删除')">
          <i class="el-icon-minus"></i>删除
        </div>
      </div>
    </div>
    <div class="table">
      <el-table :data="tableData" style="width: 100%" :height="filterShow === true ? '690px' : '762px'"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column label="序号" width="60" align="center">
          <template #default="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column v-for="item in tableList" :key="item.prop" :prop="item.prop" :label="item.label"
          :width="item.width" :align="item.align" header-align="center" />
        <el-table-column label="操作" width="60" align="center">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import dayjs from "dayjs";
import axios from "axios";
export default {
  name: 'scene',
  components: {
  },
  data() {
    return {
      filterShow: false,
      List: {
        PlanName: "",
        PlanType: "",
        AccidentType: "",
        AccidentArea: "",
        AccidentPoint: ""

      },
      filterList: [],
      keyToChineseMap: {
        PlanName: '预案名称',
        PlanType: '预案类型',
        AccidentType: '事故类型',
        AccidentArea: '事故发生区域',
        AccidentPoint: '事故发生设备',
      },
      tableData: [],
      tableList: [
        { prop: "预案名称", label: "预案名称", width: "", align: "left" },
        { prop: "预案类型", label: "预案类型", width: "", align: "center" },
        { prop: "响应等级", label: "响应等级", width: "80", align: "center" },
        { prop: "等级名称", label: "等级名称", width: "", align: "center" },
        { prop: "事故类型", label: "事故类型", width: "", align: "center" },
        { prop: "事故发生区域", label: "事故发生区域", width: "", align: "left" },
        { prop: "事故发生设备", label: "事故发生设备", width: "", align: "left" },
      ],
      multipleSelection: [],
    }
  },
  watch: {
  },
  methods: {
    async getTable(obj) {
      const options = {
        method: 'POST',
        url: 'http://10.199.98.2:8086/3DInterface_D/Business/EmergManage/Platform/yjya_bb_zsgc',
        data: {
          TIP: 'select',
          SQL: `select PlanName '预案名称', PlanType '预案类型', level '响应等级', LevelName '等级名称', AccidentType '事故类型',
                AccidentArea '事故发生区域', AccidentPoint '事故发生设备',AccidentHazard '事故发生危害',AccidentDescr '事故风险描述', Notes '注意事项'
                from imp_emergmanage.emerg_siterspmrs where PlanName LIKE CONCAT('%', '${obj.PlanName}', '%')
                and PlanType LIKE CONCAT('%', '${obj.PlanType}', '%')
                and AccidentType LIKE CONCAT('%', '${obj.AccidentType}', '%')
                and AccidentArea LIKE CONCAT('%', '${obj.AccidentArea}', '%') and AccidentPoint LIKE CONCAT('%', '${obj.AccidentPoint}', '%')`
        }
      };
      await axios.request(options).then(response => {
        this.tableData = response.data.data
      }).catch(function (error) {
        console.error(error);
      });
    },
    searchChange(val, del) {
      const requiredFields = ['预案名称', '预案类型', '事故类型', '事故发生区域', '事故发生设备'];
      if (val === '重置') {
        this.List = {
          PlanName: "",
          PlanType: "",
          AccidentType: "",
          AccidentArea: "",
          AccidentPoint: ""
        }
        this.getTable(this.List)
        this.filterList = []
      } else if (val === '查询') {
        this.getTable(this.List)
        let filterList = Object.entries(this.List).filter(([key, value]) => value !== "").map(([key, value]) => {
          const chineseName = this.keyToChineseMap[key] || key;
          return `${chineseName}:${value}`;
        });
        this.filterList = filterList
      } else if (val === '展开') {
        this.filterShow = !this.filterShow;
      } else if (val === '删除') {
        const chineseToKeyMap = {};
        Object.entries(this.keyToChineseMap).forEach(([key, chinese]) => {
          chineseToKeyMap[chinese] = key;
        });
        this.filterList = this.filterList.filter(item => item !== del);

        let list = {};

        // 1. 将 filterList 中的中文键名转换为英文键名   
        this.filterList.forEach(item => {
          const [chineseKey, value] = item.split(':');
          const englishKey = chineseToKeyMap[chineseKey] || chineseKey; // 如果没有映射，保留原键名
          list[englishKey] = value.trim();
        });

        // 2. 确保 requiredFields 中的必填字段在 list 中存在（值为空字符串）   
        requiredFields.forEach(field => {
          const englishKey = chineseToKeyMap[field];
          if (englishKey && !list.hasOwnProperty(englishKey)) {
            list[englishKey] = "";
          }
        });

        // 3. 确保 list 的结构和 List 完全一致（包括非必填字段）   
        Object.keys(this.List).forEach(key => {
          if (!list.hasOwnProperty(key)) {
            list[key] = "";
          }
        });
        this.List = list;
        this.getTable(this.List)
      }
    },
    operate(val) {
      if (val === '新增') {
        // this.$router.push('/EmergencyPlan/scene/addPage');
        this.$router.push({
          path: '/EmergencyPlan/scene/addPage',
          query: {
            type: '新增'
          }
        });

      } else if (val === '删除') {
        const list = this.multipleSelection.map(item => {
          return `('${item.预案名称}','${item.预案类型}')`;
        }).join(',');
        if (this.multipleSelection.length === 0) {
          this.$message({
            message: '请选择要删除的数据',
            type: 'warning'
          });
          return
        } else {
          this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
            center: true,
          }).then(() => {
            const options = {
              method: 'POST',
              url: 'http://10.199.98.2:8086/3DInterface_D/Business/EmergManage/Platform/yjya_bb_zsgc',
              data: {
                TIP: 'delete',
                SQL: `delete from imp_emergmanage.emerg_siterspmrs WHERE (PlanName,PlanType) IN (${list})`
              }
            };
            axios.request(options).then(response => {
              if (response.data.message === "success") {
                const options2 = {
                  method: 'POST',
                  url: 'http://10.199.98.2:8086/3DInterface_D/Business/EmergManage/Platform/yjya_bb_zsgc',
                  data: {
                    TIP: 'delete',
                    SQL: `delete from imp_emergmanage.emerg_siterspmrs_deal where (PlanName,PlanType) IN (${list})`
                  }
                };
                axios.request(options2).then(response => {
                  if (response.data.message === "success") {
                    const options1 = {
                      method: 'POST',
                      url: 'http://10.199.98.2:8086/3DInterface_D/Business/EmergManage/Platform/yjya_bb_zsgc',
                      data: {
                        TIP: 'delete',
                        SQL: `delete from imp_emergmanage.emerg_siterspmrs_jobduty where (PlanName,PlanType) IN (${list})`
                      }
                    };
                    axios.request(options1).then(response => {
                      if (response.data.message === "success") {
                        this.$message.success("删除成功");
                        this.getTable(this.List)
                      }
                    }).catch(function (error) {
                      console.error(error);
                    });
                  }
                }).catch(function (error) {
                  console.error(error);
                });
              }
            }).catch(function (error) {
              console.error(error);
            });
          }).catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
        }
      }
    },
    handleClick(row) {
      this.$router.push({
        path: '/EmergencyPlan/scene/addPage',
        query: {
          rowList: row,
          type: '编辑'
        }
      });
      // this.$router.push({
      //   name: "sceneAdd",
      //   params: {
      //     rowList: row,
      //     type: '编辑'
      //   }
      // });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
  mounted() {
    this.getTable(this.List)
  },
}
</script>
<style lang="scss" scoped>
.scene {
  width: 100%;
  height: 995px;
  padding: 24px 0;
  font-family: "Source Han Sans CN";
  font-style: normal;

  .flex {
    display: flex;
    justify-content: space-between;
  }

  .title {
    width: (1672 / 1720) * 100%;
    color: #163154;
    font-size: 20px;
    font-weight: 700;
    line-height: 22px;
    margin: 0 auto 24px;
    text-align: left;
  }

  .condition {
    margin: 0 auto 24px;
    width: (1672 / 1720) * 100%;

    .condition_1 {
      margin-bottom: 24px;
      width: 100%;
      height: 32px;

      .name {
        width: (450 / 1672) * 100%;
        height: 32px;
        line-height: 32px;
        display: flex;
        justify-content: flex-start;
        color: #6A788D;
        font-size: 14px;
        font-weight: 400;

        div {
          margin-right: 10px;
        }

        .filter {
          color: #165DFF;
          text-align: right;
          font-size: 14px;
          font-weight: 400;
          margin-left: 10px;

          &:hover {
            cursor: pointer;
          }
        }
      }

      .btn {
        width: 155px;

        div {
          width: 73px;
          height: 32px;
          line-height: 32px;
          text-align: center;
          font-size: 14px;
          font-weight: 350;
          border-radius: 4px;

          &:hover {
            cursor: pointer;
          }

          &:nth-child(1) {
            border: 1px solid #165DFF;
            color: rgba(22, 93, 255, 0.70);
          }

          &:nth-child(2) {
            background: #165DFF;
            color: #FFF;
            font-weight: 700;
          }
        }
      }
    }

    .condition_2 {
      margin: 0 auto 8px;
      width: 100%;
      height: 64px;
      border-radius: 1.792px;
      background: rgba(22, 93, 255, 0.05);
      padding: 16px 24px;

      .List {
        width: (300 / 1672) * 100%;
        height: 32px;
        line-height: 32px;
        color: #6A788D;
        font-size: 14px;
        font-weight: 400;

        &>div:nth-child(1) {
          width: 84px;
          text-align: right;
        }
      }
    }

    .condition_3 {
      margin: 0 auto;
      width: 100%;
      display: flex;
      justify-content: flex-start;

      div {
        height: 22px;
        line-height: 22px;
        padding: 0 8px;
        margin-right: 6px;
        border-radius: 3.583px;
        background: #F2F3F5;
        color: #4E5969;
        font-size: 12px;
        font-weight: 400;

        .el-icon-close {
          margin-left: 2px;

          &:hover {
            cursor: pointer;
          }
        }
      }
    }

    ::v-deep .el-input {
      width: 185px !important;
    }

    ::v-deep .el-input--medium .el-input__inner {
      height: 32px !important;
      line-height: 32px !important;
    }
  }

  .Line {
    width: (1672 / 1714) * 100%;
    height: 1px;
    background-color: #165DFF;
    margin: 0 auto;
  }

  .Btn {
    width: (1672 / 1714) * 100%;
    margin: 24px auto 12px;

    .BtnList {
      width: 142px;
      height: 24px;

      &>div {
        width: 68px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        border-radius: 4px;

        &:hover {
          cursor: pointer;
        }

        i {
          margin-right: 5px;
        }

        &:nth-child(1) {
          background: #165DFF;
          color: #FFF;
          font-size: 14px;
          font-weight: 700;
        }

        &:nth-child(2) {
          border: 1px solid #165DFF;
          color: rgba(22, 93, 255, 0.70);
          font-size: 14px;
          font-weight: 350;
        }
      }
    }
  }

  .table {
    margin: 0 auto;
    width: (1672 / 1714) * 100%;

    ::v-deep .el-table .el-table__header-wrapper th,
    .el-table .el-table__fixed-header-wrapper th {
      background-color: rgba(22, 93, 255, 0.05);
      color: #6A788D;
      font-size: 14px;
      font-weight: 500;
    }

    ::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
      background: rgba(22, 93, 255, 0.10) !important;
    }
  }
}
</style>